<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>孙玉超个人博客-关于博主</title>
    <meta name="Description" content="一个95后的草根程序员，对技术充满渴望" />
    <meta name="Keywords" content="个人博客,孙玉超，Java学习" />
    <link href="https://www.sunyuchao.com/static/css/fontawesome4.7.0/css/font-awesome.css" rel="stylesheet">
    <link href="https://www.sunyuchao.com/static/layui/css/layui.css" rel="stylesheet">
    <link rel="stylesheet"  href="https://www.sunyuchao.com/static/css/animate.css">
    <link rel="stylesheet" href="https://www.sunyuchao.com/static/css/common.css">
    <script th:src="${iconfontUrl}"></script>
    <style>
        body{background-color: rgb(244,244,244);}
        .content{width: 62%;margin: 0 auto;margin-top: 20px;position: relative;}
        .content h1{margin-top: 50px;}

        h1,h2,h3{text-align: center;}
        .content .sperator{width: 20%;margin: 0 auto;margin-top: 30px;background-color: #51aded;height: 2px;transition: all 1s;border: 20px solid rgb(244,244,244);}
        .content .sperator:hover{width: 30%;}
        .query-more{margin: 0 auto;width: 220px;margin-top: 60px;}
        .query-more a{background-color: rgb(81,173,237);padding: 0px 45px;line-height: 50px;height: 50px;width: 220px;font-size: 15px;}
        .box {

            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            margin-top: 40px;
        }
        .box .card {
            box-shadow: 0 0 20px #DFDFDF;
            width: 31%;
            height: 320px;
        }
       .box .card .about-img{overflow: hidden;}
       .box .card .about-img img{transition:transform 1s;
          -moz-transition:transform 1s; /* Firefox 4 */
          -webkit-transition:transform 1s; /* Safari and Chrome */
          -o-transition:transform 1s; /* Opera */ }
       .box .card:hover .about-img img{transform: scale(1.1);}
       .box .card h2{margin-top: 20px;font-weight: 700;}
       .box .card p{text-align: center;width: 80%;margin:  0 auto;margin-top: 20px;color: #999;
           text-overflow:ellipsis;overflow: hidden;height: 40px;display: -webkit-box;
           -webkit-line-clamp: 2;
           -webkit-box-orient: vertical;
       }

       .skill-title{margin-top: 20px;font-size: 22px;font-weight: 600;}
       .skill-content{width: 60%;margin: 0 auto;margin-top: 10px;}

        .progress{width: 660px;height: 20px;padding: 5px;}
        .progress-left{float: left; width:10%;}
        .progress-left span{font-weight: 600;font-size: 18px;}
        .out {width: 89%;height: 20px;float: right;border-radius: 10px;position: relative;background-color: #e2e2e2;
        }

        .inner {height: 20px;width: 0;background-color: gray;border-radius: 10px;}
        .inner::after{content:attr(afterContent);float: right;margin-right: 10px;font-size: 14px;color: white;}


        /*图片点击*/
        .enlargeImg_wrapper {display: none;position: fixed;z-index: 999;top: 0;right: 0;bottom: 0;left: 0;background-repeat: no-repeat;background-attachment: fixed;background-position: center;background-color: rgba(52, 52, 52, 0.8);background-size: 50%;
        }
        #enlargeImg:hover {
            cursor: zoom-in;
        }
        .enlargeImg_wrapper:hover {
            cursor: zoom-out;
        }
        /*小屏幕 1366 x 768*/
        @media screen and (max-width: 1366px) {
            .content{
                width: 88%;
            }
        }
        /*手机小屏幕*/
        @media screen and (max-width: 980px) {
            .skill-content{width: 80%;}
            .box .card{height: 267px;}
            .box .card p{line-height: 25px;height: 50px;}
            .box .card .about-img{max-height: 120px;overflow: hidden}
        }
    </style>
</head>
<body>

<!--搜索-->
<div th:replace="index :: search"></div>
<!--右下角固定-->
<div th:replace="index :: permanent">
</div>
<div class="top">
    <div class="top-center">
        <div class="top-center-l">
            <img th:src="${logoUrl}">
        </div>
        <div class="top-center-c">
            <ul class="nav">
                <li><a href="/">首&nbsp;&nbsp;页</a></li>
                <li><a href="/learning">爱学习</a></li>
                <li><a href="/life">微动态</a></li>
                <li th:replace="index :: onlineutils"></li>
                <li class="nav-this"><a href="/aboutme">关于我</a></li>
                <li><a href="/message">留言板</a></li>
            </ul>
        </div>
        <div th:replace="index :: top-center-r" class="top-center-r"></div>
    </div>
</div>

<div class="content">
    <h2 style="font-size: 22px;">关于我</h2>
    <div style="margin: 0 auto;width: 100px;margin-top: 20px;"><img id="enlargeImg" th:src="${card.avatar}" width="100" height="100" style="border-radius: 50%;"></div>
    <h3 style="margin-top: 25px;">世间最美好的东西，莫过于有几个头脑和心地都很正直的真正朋友</h3>
    <hr class="sperator">
    <h2 class="skill-title">我的技能分布</h2>
    <div class="skill-content">
        <div th:each="skill : ${skillList}" class="progress">
            <div class="progress-left"><span th:style="'color:' + @{(${skill.color})} + ''" th:text="${skill.name}"></span></div>
            <div  class="out" th:data-num="${skill.dataNum}">
                <div th:style="'background-color:' + @{(${skill.color})} + ''" class="inner"></div>
            </div>
        </div>
    </div>

    <h1>个人信息</h1>
    <h3 style="margin-top: 25px;">明确地爱，直接地厌恶，真诚地喜欢，站在太阳下的坦荡，大声无愧地称赞自己</h3>
    <hr class="sperator">
    <div class="box">
        <div th:each="grxx : ${grxxList}" class="card">
            <a th:href="@{/article/__${grxx.id}__}"><div class="about-img">
                <img th:src="${grxx.imageUrl}" width="380">
            </div></a>
            <a th:href="@{/article/__${grxx.id}__}"><h2 th:text="${grxx.title}"></h2></a>
            <p th:text="${grxx.description}"></p>
        </div>
    </div>
    <div class="query-more"><a href="/?bread=个人信息" class="layui-btn layui-btn-lg">查看更多</a></div>
    <h1>人生感悟</h1>
    <h3 style="margin-top: 25px;">人一旦觉悟，就会放弃追寻身外之物，而开始追寻内心世界的真正财富。</h3>
    <hr class="sperator">
    <div class="box">
        <div th:each="rsgw : ${rsgwList}" class="card">
            <a th:href="@{/article/__${rsgw.id}__}"><div class="about-img">
                <img th:src="${rsgw.imageUrl}" width="380">
            </div></a>
            <a th:href="@{/article/__${rsgw.id}__}"><h2 th:text="${rsgw.title}"></h2></a>
            <p th:text="${rsgw.description}"></p>
        </div>
    </div>
    <div class="query-more"><a href="/?bread=人生感悟" class="layui-btn layui-btn-lg">查看更多</a></div>
</div>
<div class="footer" style="margin-top: 30px;">
    <p><a href="https://beian.miit.gov.cn/">Design by：暮色妖娆丶 备案号：皖ICP备19018192号-1</a></p>
</div>

    <script src="https://www.sunyuchao.com/static/layui/layui.js"></script>
    <script>
        layui.use(['layer','element'],function () {
            var layer = layui.layer,
                element = layui.element;
        });
    </script>

<script src="https://www.sunyuchao.com/static/js/jquery3.3.1.min.js"></script>
<script>

    $("#enlargeImg").click(function() {
        $(this).after("<div οnclick='closeImg()' class='enlargeImg_wrapper'></div>");
        var imgSrc = $(this).attr('src');
        $(".enlargeImg_wrapper").css("background-image", "url(" + imgSrc + ")");
        $('.enlargeImg_wrapper').fadeIn(200);
    });
    $(document).on('click','.enlargeImg_wrapper',function(){
        $('.enlargeImg_wrapper').fadeOut(600);
    });

    /*鼠标滚动时候，文章列表渐渐显示*/
    $(window).scroll(function () {
        $('.box').each(function (obj) {
            if ($(this).offset().top < $(window).height()) {
            } else {
                if (($(window).height() + $(document).scrollTop()) >= $(this).offset().top +20) {
                    $(this).addClass('animated fadeInUp');
                }
            }

        })

    });

    /**
     * 绘制进度条
     * */
    $(function () {
        $(".out").each(function () {
            var that=$(this);
            var num = that.attr("data-num")/100;
            var width = that.width();
            var number = num * width;
            $(that.find(".inner")).animate({
                width:number
            },2000);
            //设置计时器,动态的改变span的文本显示
            var timerID = setInterval(function () {
                // 显示进度百分比
                var num = Math.floor($(that.find(".inner")).width() / that.width() * 100);
                $(that.find(".inner")).attr('afterContent',num+'%');

            });
            setTimeout(function () {
                clearInterval(timerID);
                $(that.find(".inner")).attr('afterContent',that.attr("data-num")+'%');//数值不稳定手动设置
            },2000)
        });
    })
</script>
<script src="https://www.sunyuchao.com/static/js/heart.js"></script>
<script src="https://www.sunyuchao.com/static/js/common.js"></script>
</body>
</html>